layui.use(['layer'], function () {

    var chattingSocket = {

        _webSocket: null,

        _init: function () {
            let _this = this;
            _this._bind();
            _this._initWebSocket();
        },

        _bind: function () {
            let _this = this;
            $('#comment-submit-btn').on("click", function (event) {
                _this._sendMsgToServer();
            });
        },

        _socketUrl: function () {
            return "ws://127.0.0.1:8083" + appCtx + "/chattingRoom";
        },

        _initWebSocket: function () {
            let _this = this;
            let webSocket = new WebSocket(_this._socketUrl());
            /**
             * 当服务端打开连接
             */
            webSocket.onopen = function (event) {
                console.log('WebSocket打开连接');
            };

            /**
             * 当服务端发来消息：1.广播消息 2.更新在线人数
             */
            webSocket.onmessage = function (event) {
                _this._onSocketMessage(event);
            };

            /**
             * 关闭连接
             */
            webSocket.onclose = function (event) {
                console.log('WebSocket关闭连接');
            };

            /**
             * 通信失败
             */
            webSocket.onerror = function (event) {
                console.log('WebSocket发生异常');

            };
            _this._webSocket = webSocket;
        },

        _onSocketMessage: function (event) {
            console.log('WebSocket收到消息：%c' + event.data, 'color:green');
            //获取服务端消息
            let message = JSON.parse(event.data) || {};
            let $messageContainer = $('#message-container-id');
            if (message.type === 'SPEAK') {

                let html = '<li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt="" src="';
                html += appCtx;
                html += '/static/image/chat.png">';
                html += '</i></a><div class="comment-main"><header class="comment-header"><div class="comment-meta">';
                html += '<a class="comment-author" href="#">';
                html += message.username;
                html += '</a> 评论于<time title="';
                html += message.nowStr;
                html += '"datetime="';
                html += message.nowStr;
                html += '">';
                html += message.nowStr;
                html += '</time></div></header><div class="comment-body"><p class="comment-p-word">';
                html += message.msg;
                html += '</p></div></div></li>';

                $messageContainer.append(html);
            }
            $('#home-online-count').text(message.onlineCount);
            //防止刷屏
            let $cards = $messageContainer.children('.mdui-card:visible').toArray();
            if ($cards.length > 5) {
                $cards.forEach(function (item, index) {
                    index < $cards.length - 5 && $(item).slideUp('fast');
                });
            }
        },

        _sendMsgToServer: function () {
            let _this = this;
            let $message = $('#comment-text-input');
            if ($message.val()) {
                _this._webSocket.send(JSON.stringify({
                    msg: $message.val(),
                    userNickname: $("#user_nickname_id").text()
                }));
                $message.val(null);
            }

        }

    };

    chattingSocket._init();

});